<template>
    <div class="demo-container">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="使用icon" name="1">
                <icon-demo />
            </el-tab-pane>
            <el-tab-pane label="布局容器container" name="2">
                <container-demo />
            </el-tab-pane>
            <el-tab-pane label="element plus menu 测试" name="3">
                <menu-test />
            </el-tab-pane>
            <el-tab-pane label="随机粒子效果演示" name="4">
                <particle />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import iconDemo from './IconDemo.vue'
import containerDemo from './ContainerDemo.vue'
import menuTest from './MenuTest.vue'
import particle from './particle.vue'
import { ref } from 'vue'

const activeName = ref('1')

function handleClick(tab, event) {
    console.log(tab, event)
}
</script>
<style lang="scss" scoped>
.demo-container {
    box-sizing: border-box;
    height: 100vh;
    padding: 20px;
    // background-color: #f5f5f5;
}
</style>
